<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .backgray {
            background-color: gray;
        }
        .container {
            width: 960px;
        }
        .row1 {
            display: flex;
            height: 80px;
            gap: 10px;
        }
        .logo {
            flex-basis: 200px;
        }
        .banner1 {
            flex-basis: 540px;
        }
        .banner2 {
            flex-basis: 200px;
        }

        .menu {
            margin: 10px 0;
            height: 30px;
        }

        .row2 {
            display: flex;
            gap: 10px;
        }

        .col1 {
            flex-basis: 370px;
            height: 410px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .block1 {
            height: 200px;
            gap: 10px;
        }
        .block2 {
            display: flex;
            height: 200px;
            gap: 10px;
        }
        .block3 {
            flex-basis: 180px;
        }


        .col3 {
            flex-basis: 200px;
            height: 410px;
            display: flex;
            flex-direction: column;
        }

        .block7 {
            height: 130px;
        }

        .block8 {
            height: 130px;
            margin: 10px 0;
        }

        .footer {
            height: 60px;
            margin-top: 10px;
        }

        .center {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row1">
            <div class="logo backgray center">logo</div>
            <div class="banner1 backgray center">banner1</div>
            <div class="banner2 backgray center">banner2</div>
        </div>
        <div class="menu backgray center">菜单</div>
        <div class="row2">
            <div class="col1">
                <div class="block1 backgray center">栏目1</div>
                <div class="block2">
                    <div class="block3 backgray center">栏目3</div>
                    <div class="block3 backgray center">栏目4</div>
                </div>
            </div>
            <div class="col1">
                <div class="block1 backgray center">栏目2</div>
                <div class="block2">
                    <div class="block3 backgray center">栏目5</div>
                    <div class="block3 backgray center">栏目6</div>
                </div>
            </div>
            <div class="col3">
                <div class="block7 backgray center">栏目7</div>
                <div class="block8 backgray center">栏目8</div>
                <div class="block7 backgray center">栏目9</div>
            </div>
        </div>
        
        <div class="footer backgray center">页脚</div>
    </div>
</body>
</html>